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-- Tidak untuk Diperjualbelikan -- 


BAB 1. INTRODUKSI 


JavaScript adalah “bahasa web-browser”. Tanpa JavaScript, konten yang ditampilkan dalam 
browser akan tetap statis, tidak dinamis dan interaktif. Bahasa yang dulu tidak populer ini, dalam 
beberapa tahun terakhir menjadi salah satu bahasa penting yang wajib dikuasai oleh web 
developer. Bahkan saat ini JavaScript juga makin populer sebagai bahasa pemrograman server 
menggunakan program yang disebut NodeJS yang berbasis V8 JavaScript Engine buatan Google 
yang juga digunakan oleh browser populer yaitu Google Chrome. 


Di sisi browser (client), kita semua pasti pernah mendengar atau menggunakan library 
seperti JQuery, Dojo, YUI, dan sebagainya yang memungkinkan kita membuat aplikasi/website 
yang menarik & interaktif tanpa harus bersusahpayah mengatasi perbedaan JavaScript engine 
yang berbeda antara browser yang satu dengan yang lain. 


Dari sekian banyak library, yang paling populer adalah JQuery yang memungkinkan kita 
menambahkan elemen-elemen atraktif dengan mudah. Sayangnya, masih banyak di antara 
pengguna JQuery yang bahkan tidak paham JavaScript sama sekali sehingga mereka bergantung 
100% pada library ini bahkan untuk menyelesaikan permasalahan yang sangat sederhana 
sekalipun. Sebagai contoh, dulu saya pernah melihat di forum StackOverflow seseorang bertanya 
tentang cara membaca “cookies” dengan JavaScript, ironisnya, jawaban paling populer adalah 


“pakai Jguery plugin ...”. 


Memang tidak ada salahnya mengandalkan JQuery, tetapi kita harus ingat bahwa JQuery 
dibuat untuk sekedar membantu kita menyelesaikan pekerjaan, bukan untuk menggantikan 
JavaScript. Bahasa browser adalah JavaScript, bukan JQuery. Untuk membuat website mungkin 
ini bukan masalah besar. Namun kalau kita membuat aplikasi, pemahaman tentang JavaScript 
adalah wajib walaupun pada prakteknya kita menggunakan library untuk mempermudah 
pekerjaan kita. Kualitas produk akhir tetap tergantung pada pemahaman kita tentang browser, 
html, CSS, dan JavaScript. 


Menurut saya pribadi, JavaScript adalah bahasa yang mudah dipelajari tetapi tidak mudah 
dikuasai karena untuk menguasai sebuah bahasa, kita tidak hanya perlu tahu “bagaimana” tetapi 
juga “kenapa”. Semua orang bisa menulis kode JavaScript, tetapi tidak semua paham kenapa 
sebuah kode ditulis dengan cara tertentu. Sifat JavaScript yang dynamic-typing seringkali 
mempersulit proses debugging dan mempermudah kita melakukan kesalahan tanpa kita sadari. 
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Sifat ini juga menyebabkan sampai sekarang belum ada editor atau IDE yang 100% support 
JavaScript dengan segala fiturnya ( code hint, mass refactoring, intellisense, dll ). Beda dengan 
bahasa yang bersifat static-typing seperti Java, C#, dan ActionScript 3 di mana setiap IDE bisa 
mengenali setiap baris kode dari struktur project kita. Ditambah lagi perbedaan JavaScript engine 


di setiap browser yang kadang membuat frustrasi. 


Dalam buku ini, kita akan mempelajari dasar-dasar bahasa JavaScript dan mengenal 
kelebihan serta kekurangannya agar kita memiliki pondasi yang cukup untuk belajar materi yang 
lebih kompleks. Selain materi yang benar-benar dasar, dalam buku ini saya juga membahas 


pengenalan topik yang sedikit rumit yaitu: 


e Scope-chain 
e Closure 
e Class & Object 


e Inheritance 


1.1 ECMAScript 5 


JavaScript adalah bahasa pemrograman yang dibuat mengikuti spesifikasi standar yang 
disebut ECMAScript dan saat ini versi termodern dari ECMAScript adalah versi 5. Sebagian besar 
browser modern sudah mendukung ECMAScript 5 walaupun tidak ada implementasi yang 100% 


sama. 


Seperti biasa, Microsoft sedikit terlambat dalam implementasinya dan saat ini hanya Internet 
Explorer 9 ke atas yang bisa disebut kompatibel dengan ECMAScript 5. Untungnya beberapa 
developer membuat library untuk menutupi kekurangan Internet Explorer versi 7 & 8 sehingga kita 
tidak perlu bersusah payah menulis kode khusus untuk browser ini. 


Library yang ditujukan untuk mengatasi atau menutupi kekurangan sebuah browser dikenal 
dengan sebutan Polyfill atau Shim. Berikut ini daftar beberapa polyfill yang bisa kita gunakan: 
https.//github.com/Modernizr/Modernizr/wiki/H TML5-Cross-browser-Polyfills 
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1.2 Testing Environment 


Untuk menjalankan contoh-contoh kode dalam buku ini, kita menggunakan JavaScript 
console yang ada di browser Chrome (buka menu JavaScript Console) atau Firefox dengan 


extension Firebug. 


Semua contoh kode kita tulis sebagai embedded script dalam blok <script></script> 
dalam file html kecuali jika ada keterangan bahwa kode tersebut harus ditulis dalam file . js yang 


terpisah. 


Berikut ini contoh file html untuk embedded script. 


DOS Kei 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<eieles</ciele> 
</head> 
<body> 


Ee 
//kode 


</ Serious 


</body> 
</html> 


Berikut ini contoh file html untuk memuat file .js eksternal. 


LIDL, Ina: 


<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 


<script src="main.js"></script> 
Keris 
//kode lain 


</ BCTI 


</body> 


</html> 


Untuk editor kode, saya menggunakan Microsoft Webmatrix 2' yang bisa Anda dapatkan 
secara gratis. Anda bebas menggunakan editor apa saja namun saya sarankan pilih editor yang 


mendukung code-hinting atau intellisense JavaScript. 


Di dalam contoh-contoh kode saya sering melakukan logging ke JavaScript console dengan 
perintah console.log(). Perintah ini bisa di-support juga oleh Firebug. Saya kurang tahu 


apakah browser lain juga memiliki fitur yang sama. 


1 http://www.microsoft.com/web/webmatrix/ 


BAB 2. SINTAKS, VARIABEL & TIPE DATA 


2.1 Variabel 


Variabel adalah kode yang merujuk pada sebuah lokasi di memori (RAM) di mana sebuah 
data berada. Variabel tidak berisi data tetapi hanya merupakan referensi atau rujukan sebuah data 
di memori. Jadi secara teknis, pernyataan "variabel A bernilai 2" sebenarnya kurang tepat namun 


pernyataan ini lebih mudah dipahami dan ditulis daripada "variabel A merujuk pada data numerik 
bernilai 2 di memori". 


Satu buah data bisa dirujuk oleh lebih dari satu variabel. Dalam kode berikut, variabel 


myCar dan wifeCar sama-sama merujuk pada satu data yaitu objek Car yang sama: 


var myCar = new Car): 
var wifeCar = myCar; 
Ada dua langkah yang diperlukan untuk menggunakan variabel yaitu: 


1. Deklarasi 


2. Inisialisasi atau definisi 


Kita mendeklarasikan variabel dengan menggunakan kata kunci (keyword) var seperti 
contoh berikut: 


firstName; 
last_name; 


email; 
wheel 4; 


Kita bisa menggunakan kombinasi huruf, angka, dan underscore untuk nama variabel tetapi 
nama variabel tidak boleh diawali dengan angka. Contoh berikut ini tidak valid: 


Pada saat variabel dideklarasikan, nilainya adalah undefined sampai kita melakukan 
inisialisasi. Inisialisasi sebuah variabel berarti memberi nilai awal pada variabel tersebut. 


Inisialisasi dan deklarasi bisa dilakukan dalam satu baris atau baris yang terpisah. 


Ett enee Pia CRIA sen Denis 
var car brand = "Honda" 


//Inisialisasi terpisah 
var car brand; 
car brand = 'Honda'; 


Kita juga bisa mendeklarasikan beberapa variabel sekaligus hanya dengan satu keyword var 


di mana antara satu variabel dengan yang lain dipisahkan dengan koma. Seperti contoh berikut: 


//semua dalam satu baris 
var brand = 'honda',type='mpv', numberOfWheels 


//baris terpisah (lebih baik daripada satu baris) 
var brand = 'honda', 

type='mpv', 

numberOfWheels 

price; 


JavaScript memungkinkan kita membuat data dengan dua notasi yaitu literal dan konstruktor 
(dengan keyword new). Notasi literal lebin disukai untuk tipe data dasar seperti Object, Array, 


Number, dan String sedangkan untuk notasi konstruktor kita gunakan untuk custom type ( tipe 


data yang kita buat sendiri ). 


notasi literal 
var a = D ST 
var ola = Is 
var n = 123; 


//notasi objek (tidak disarankan) 
var a = new Array(1,2,3); 

var obj = new Object(); 

var n = new Number(123); 


2.2 String 


String adalah data yang berisi deretan karakter yang digunakan untuk merepresentasikan 


sebuah teks. String diawali dan diakhiri dengan tanda kutip ganda atau kutip tunggal. 


//dengan tanda kutip ganda 
var brand = "Honda", 
//dengan tanda kutip tunggal 
var brand = ‘Honda’; 


//angka yang dilingkupi tanda kutip 
//berubah menjadi string (teks) jadi kita tidak 
//bisa melakukan operasi matematika 


var in = 112341565 


//penjumlahan string dengan number 

//menyebabkan number dikonversi menjadi string 
//hasilnya adalah penggabungan string 

var j = ''+123456;//hasilnya sama dengan string '123456' 


//teks yang berisi tanda kutip tunggal harus 
//diawali dan diakhiri dengan kutip ganda 
var error = "Can't find user"; 

//atau menggunakan escape character "\" 

var error = 'Can\'t find user'; 


2.3 Number 


Number adalah representasi data numerik. Dalam JavaScript, data ini secara default 


berjenis floating point (desimal) tetapi kita juga bisa menggunakan bilangan oktal (basis 8) dan 
heksadesimal (basis 16). 


var n - 1; 

var mass = 1,5; 

//oktal berawalan 0 

var o = 0377; 
//heksadesimal berawalan 0x 
var color = OxFFFFFF; 


JavaScript memiliki dua tipe data khusus yang berkaitan dengan number yaitu Infinity 


dan NaN. Infinity adalah data numerik yang nilainya sangat besar (atau sangat kecil) tidak 


terhingga, melebihi batas yang bisa diproses oleh JavaScript. Infinity bisa bernilai positif atau 


negatif. NaN adalah singkatan dari Not a Number yang merupakan nilai ekuivalen dari undefined 
tetapi khusus untuk data numerik. 


var kecilSekali = -Infinity; 
var besarSekali = Infinity; 


//perkalian data numerik dengan string 
//menghasilkan NaN 
var a = 10 x "20"; 


//operasi numerik yang melibatkan NaN 
//akan menghasilkan NaN juga 
var b = 10 * 10 + NaN 


Selain operator matematika standar ( *, /, +, -,% ), kita juga bisa menggunakan beberapa 
shortcut seperti contoh berikut. 


var a = 10; 
//kalikan a dengan 2 dan simpan dalam variabel a lagi 


//sama dengan a =a * 2 
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a *= 2; 
console.logia); ZZ 20 


var b = 20; 
//bagi b dengan 2 dan simpan hasilnya dalam variabel b lagi 
//sama dengan b = 

ID /= 2} 

console.log(b); //10 


lo) ff 2 


//jumlahkan a dengan 1 dan simpan hasilnya 
//dalam variabel a lagi 

//sama dengan a = a + 1 atau +ta 

earır 

console.log(a); //21 


//kurangi b dengan 1 dan simpan hasilnya 
//dalam variabel b lagi 

//sama dengan b = = 1 atau --b 

Do 

Console Los (19) 7 9 


//ambil sisa pembagian b dengan 2 (modulus) dan simpan 
jimasilaya Calam variae lo Lagi 

//sama dengan b = b % 

9 w= 25 

console.log(b);//1 


Kita perlu berhati-hati dalam menggunakan operator -- dan ++ dalam operasi perbandingan 
karena posisi mereka terhadap variabel yang bersangkutan akan mempengaruhi hasil akhirnya. 
Berikut ini contohnya. 


reise 


Aa 


Jika posisi operator ++ dan -- ada di belakang variabel, maka variabel tersebut akan 
dibandingkan terlebih dahulu, baru kemudian nilainya dinaikkan (++) atau diturunkan (--). Kedua 


operasi ini disebut post-increment dan post-decrement. 


Sebaliknya, jika kedua operator tersebut diletakkan di depan variabel, maka nilainya akan 
dinaikkan atau diturunkan dulu baru kemudian dibandingkan. Kedua operasi ini di sebut pre- 
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increment dan pre-decrement. 


2.4 Array 


Array adalah struktur data sederhana berisi deretan data (elemen) yang bisa diakses 
dengan menggunakan nomor indeks atau key. Indeks sebuah array dimulai dari nol. 


//buat array 3 elemen 
wae a = [1,2215 


//tampilkan data pada index pertama (0) 
console lee (AO) ey Zoran I 


//tampilkan data pada index terakhir (2) 
console Log (a 2] ) Aa 3 


Array yang menggunakan key (string) sebagai identitas, disebut associative-array. Untuk 
mengakses elemennya kita harus menggunakan key bukan nomor indeks. Key ditulis dalam tanda 
kurung siku atau diawali dengan tanda titik (dot-notation). 


var info = I? 
info['name'] = 'John'; 
info['age'] = 40; 
//dengan dot notation 
info.sex = 'male'; 


console.log(info['sex']);//male 
console.log(info.name) ; //John 


//Associative-array tidak mengenal indeks 
console.log(info[0]);//undefined 


2.4.1 Array Function 


Array memiliki banyak built-in function untuk memanipulasi elemen, membuat duplikat, dan 


lain-lain. Beberapa di antaranya bisa kita coba dengan kode berikut. 


yer MATAN, = 

//tambahkan elemen di index 1 
myArray I) = 5; 

console.log (myArray) ://0,5 


//tambahkan elemen baru di belakang 
myArray.push (10): 
console.log(myArray): //0,5,10 


//tambahkan elemen baru di depan 
myArray.unshift (100): 
console.log (myArray); //100,0,5,70 
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//tambahkan elemen baru di depan elemen terakhir 
myArray.splice(myArray.length - 1, 0, 300): 
consoler lobo myArray 8 7/100 0-5, 3100.10 


//hapus elemen terakhir 
myArray.pop () ; 
console.log imyArray); //100,0,5,200 


//hapus elemen pertama 
myArray.shift(); 
console.log(myArray); //0,5,300 


//gabungkan dengan array lain 

Wee otherArray = va’, o", Jeitz 
myArray = myArray.concat (otherArray) ; 
console.log(myArray); //0,5,300,a,b,c 


//buat array baru berisi sebagian elemen myArray 
//antara index 0 - terakhir 

var partial = myArray.slice(1, myArray.length = 1); 
console. log (sereal)? 7/5,3500 Ao 

//myArray tidak berubah 

Console . Log (marcar)? //0 E Sg. 49,8 


//buat duplikat 
var myCopy = myArray.concat (): 
console LOG (mo) //0,5, 300, 51,10, 


//buat string dari array dengan pemisah '|' 
ver Ss = myArray Jom ("Ie 
console.log(s); //0|5|300|a|blc 


2.5 Object 


Object adalah "mbahnya" semua tipe data dalam JavaScript. Dengan kata lain, semua tipe 


data adalah turunan dari Object. Untuk membuat objek, kita menggunakan notasi literal { }. 


var car = {}; 


Objek memiliki properties dan untuk membuat properties kita bisa menggunakan cara yang 
sama dengan associative-array atau menggunakan notasi objek (key-value) seperti contoh 
berikut. 


//notasi objek, lebih disukai 

//setiap properti dipisahkan oleh koma & key-value dipisahkan 
//oleh titik-dua. 

//Tidak boleh menggunakan keyword var 


var myCar = { 
brand: 'Honda', 
year:2011 

y; 
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//cara yg sama dengan sintaks associative-array 


wae opene = js 
vortar orari] = "Iovotea" y 
yourCar['year'] 20122 


Sama seperti associative-array, kita mengakses properti dengan key dalam kurung siku 
atau dot-notation. 


console.log(yourCar.brand) ; 
console.log(yourCar['brand']); 


2.6 Introspeksi 


Introspeksi adalah proses pengecekan sebuah objek yang kita lakukan ketika kita ingin 
mengetahui apa tipe data sebuah objek dan apa saja variabel dan function yang ada di dalamnya. 
JavaScript memiliki tiga built-in function untuk melakukan introspeksi yaitu: 


e typeof: memeriksa tipe data sebuah variabel 
e instanceof : untuk mengecek apakah sebuah data merupakan instance (objek) dari 
sebuah kelas 


e hasOwnProperty : untuk mengecek apakah sebuah objek memiliki properti (key) 


var a 
name: 'bob', 
die: function () { } 


hg 


console.log(a.hasOwnProperty('name')); //true 
console.log(a.hasOwnProperty ('die'));//true 
console.log(a.hasOwnProperty ('kill'));//false 


var b = 100; 
var e = "100 
var Cl Emer tegt () 4 Pr 
EE 
typeof b): //number 
E) PP Sees 
typeof d); //function 


console.log(typeof a 

consol] LOG ( 

console.log (typeof 
og ( 


consol 


var myClass = function () { 
var name; 


} 
var myObject = new myClass(); 


console.log(myObject instanceof myClass); //true 


Salah satu kegunaan introspeksi adalah untuk melakukan validasi data. Misalkan kita 
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membuat function yang hanya menerima data bertipe string, maka kita bisa melakukan validasi 
menggunakan typeof seperti contoh berikut: 


function validateName (value) { 
if(typeof value == 'string) { 


//kode yang dieksekusi jika value benar bertipe string 
} 
} 


2./ Boolean dan Kondisional 


Operasi kondisional adalah proses eksekusi kode jika suatu syarat terpenuhi. Jika syarat 
tidak terpenuhi dan ada kode alternatif, maka kode alternatif itulah yang akan dieksekusi. Untuk 
melakukan operasi kondisional kita menggunakan data bertipe Boolean yaitu data yang hanya 


bisa bernilai true atau false. 


ver a = icles 
typeof a; //boolean 


//sama seperti Number, nilai boolean yang dibungkus 
//oleh tanda petik berubah menjadi string 

var 19 = Verte“ p 

typeof b;//str7ng 


2.7.1 Logika 


JavaScript memiliki tiga operator logika yaitu: 


e ! : kebalikan (negasi) 
e && : logika AND 
e ||: logika OR 


Operator ! akan menghasilkan nilai kebalikan dari data di mana operator tersebut 
disematkan. 


LU y 
-log (a); // true 
log(!a);//false 


= false; 
.log(!b)://true 


Logika AND (88) menghasilkan nilai true hanya jika kedua ekspresi di sebelah kiri dan 
kanan operator tersebut bernilai true. 
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sole.log(a && b)://true 


false; 
le.log(a && b);//false 


false; 
.logía && b);//false 


= true; 
var c = false; 
console.logía && b && c);//false 


Logika OR ( || ) menghasilkan nilai true jika minimal salah satu dari ekspresi di sebelah kiri 


dan kanan bernilai true. 


var a = true; 
var bD =~ true; 


sole.log(a b)://true 


false: 
le.log(a b)://true 


false: 
¿log la b)://false 


= true; 
var c = false; 
console.log(a e); // Erue 


Sebagai kuis, coba perkirakan apa tampilan di console (true atau false) tanpa 


menjalankan kode berikut di browser. 


var 
war 
var 
wor 


console. b && lc && !d) 


2.7.2 Perbandingan 


Berikut ini beberapa operator perbandingan yang tersedia dalam JavaScript berikut contoh 
kodenya. 


Operator True jika ... 
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Data di sisi kiri sama dengan yang di sisi kanan. Sebelum 
perbandingan dilakukan JavaScript engine akan mencoba 
melakukan konversi tipe data sehingga kedua operand bertipe 
sama jika mungkin. 


Data di sisi kiri sama dengan yang di sisi kanan dan keduanya 
=== mengacu pada data yang sama. Perbandingan dilakukan tanpa 
konversi. 


Data di sisi kiri tidak sama dengan yang di sisi kanan setelah 
konversi tipe data. 


Data di sisi kiri tidak sama dengan yang di sisi kanan ATAU 
l== keduanya bernilai sama tetapi berbeda tipe data. Operasi ini tanpa 
konversi tipe data. 


> Data di sisi kiri lebih besar daripada data di sisi kanan 


Data di sisi kiri lebih besar daripada atau sama dengan data di sisi 


>= kanan 
< Data di sisi kiri kurang dari data di sisi kanan 
<= Data di sisi kiri kurang dari atau sama dengan data di sisi kanan 


myClass = function () 1 
name: 'bob' 


myCclass2 = Eumcruriom () | 
name: 'bob' 


= new myClass(); 
Ar 
= myClass2(); 


// true 

Balsa 
//false 
//false 
II Erue 


ii talse, tidak ada konversi 
ue MEN dok ada konversi 


VB A ES 
Venue 
\ BY Ee 


2 //terue 


//kasus menarik, NaN tidak sama dengan 
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//apapun bahkan dirinya sendiri 


console.log( NaN == NaN );//false 


2.7.3 Pencabangan 


Kode program yang kita tulis tidak akan terlepas dari pencabangan. Dua pernyataan yang 
kita gunakan untuk pencabangan adalah if dan if-else. 


var a 


function check ( 
console. Log 
ase (im > ©) 
console.] lebih besar dari 0'); 
} else | 
console.] tidak lebih besar dari 0') 


Ae 


(ia > a) 4 

console. ] lebih besar 
) else if (n 

Console. kurang dari 
} else | 


Sol sama dengan 


1 lebih besar dari 8 
1 kurang dari 5 


18 lebih besar dari @ 
18 lebih besar dari 5 


-1 tidak lebih besar dari @ 
-1 kurang dari 5 


5 lebih besar dari @ 
5 sama dengan 5 


Gambar 2-1 Contoh Pencabangan 
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2.7.4 Ternary Operator 


Operator ini digunakan sebagai jalan pintas ( shortcut ) untuk pencabangan sederhana. 


Sebagai contoh, misalkan kita punya function seperti berikut. 


ula Sr Lom Cneck le) | 


as (e > 0) P 
Congolees Log (YOki) 

} else { 
Console los (“mole Ok") 


hg 


Kode di atas bisa ditulis dengan ternary operator seperti berikut. Di mana baris (c > 0 ) 


? true false fungsinya sama dengan blok kode if-else di atas. 


function check (c) | 
var Status = (e > 0 
console.log(status) ; 


} 


2.7.5 switch-case 


Switch-case kita gunakan untuk pencabangan dengan banyak kondisi sebagai pengganti if- 


else. Sintaks dasarnya adalah 


switch(variabel yang diuji) { 
case kondisi pertama: 
//kode yang dieksekusi jika kondisi pertama terpenuhi 
break; //keluar dari switch-case 


case kondisi kedua: 
//kode yang dieksekusi jika kondisi kedua terpenuhi 


break 


ceres 
//kode yang dieksekusi jika kondisi-kondisi di atas tidak 


//ada yang terpenuhi 


Di bawah ini contoh switch-case sederhana di mana variabel status berisi pesan berbeda- 


beda tergantung tipe data yang dikirim ke function checkType. 


function checkType (n) { 
console.log(' 


var Siceicusy 
var t = typeof n; 
switch (t) { 
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case 'string' 
status = 'anda memasukkan string' 
break: 

case 'number' 
status = 'anda memasukkan angka' 
break: 

default: 
//jika string ataupun number 
status =" memasukkan object'; 


} 


Console Log (STATUS) f 


} 


a');//anda memasukkan string 
00); //anda memasukkan angka 
100');//anda memasukkan string 
null); //anda memasukkan object 
undefined); //anda memasukkan object 
[1, 2, 31); //anda memasukkan object 


checkType 
checkType 
checkType 
checkType 
checkType 
checkType 


( 
(al 
C 
( 
( 
( 


E? Elements ‘gi | Resources Gei Network "a Sources CB Timeine 
= 


anda memasukkan string 


anda memasukkan number 


anda memasukkan string 


anda memasukkan object 


anda memasukkan object 


anda memasukkan object 


Gambar 2-2 Contoh Switch-case 


2.8 Perulangan 


Perulangan adalah pemrosesan sekumpulan data atau eksekusi kode sebanyak beberapa 


kali. JavaScript memiliki empat operator perulangan yaitu for, for-in, while,dan do-while. 


2.8.1 for 


for kita gunakan untuk melakukan perulangan dengan batas yang kita tentukan. Batas ini 


harus berupa angka. 


var a = |]; 
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tor (wee ı = Of 1 < 10: at) | 
a.push(i); 


i 


console.log(a); 
console.log('panjang a = ' + a.length + " elemen"): 


//gandakan nilai a dan simpan hasilnya dalam array b 
var lo = (LIF 
ror (var j = Of J € alengeng Jer) 4 

Cpu en 


} 
console.log(b); 


//cari data bernilai 5 dalam array a dan hentikan pencarian 
//begitu data ditemukan 
var Cc; 
//sintaks alternatif, lebih efisien karena panjang array a 
//disimpan dalam variabel len 
for (var k = 0,len = a.length; k « len; k++) ( 
it lalk] === 3) í 

e = alk]; 

//data ditemukan, hentikan loop dan keluar dari loop 

break; 


} 
} 
//perhatikan nilai k terakhir tidak sama dengan 
//panjang array a 
console.log('data: ' + c + ' ditemukan di indeks ' + k); 


2.8.2 for-in 


for-in hanya bisa digunakan untuk memproses array atau object. Berbeda dengan for, while, 
dan do-while yang bersifat generik. Berikut ini contoh perulangan for-in atas sebuah array. 
wee lis 


var message; 
itor (wate ı im liste) { 


message = 'indeks ' + i+ ' berisi data ' + list[index]; 
console.log (message) ; 


bs 


Hasil eksekusi kode di atas adalah seperti gambar di bawah ini. 


har 
Mana: 
Men gu c 


oi Ono 
i Java Scrint 22 
Javaocrıpt 


E? Elements (gi ] Resources Gei Network “3 Sources CB Timeine 
ES 


indeks ® berisi data a 
indeks 1 berisi data b 
indeks 2 berisi data c 


Gambar 2-3 Output hasil eksekusi for-in atas sebuah array 


for-in juga bisa kita gunakan untuk memproses semua atribut (key) sebuah object seperti 
contoh berikut ini. 


var person = { 
Mame! bs 
"age':40, 
"sex':'male' 


} 


var message; 


for (var attr in person) { 
message = 'atribut 'tattr+ ' berisi data ' + personlattr]; 
console.log (message) ; 


} 


| 1 E - 
E? Elements (gi | Resources Gei Network "e Sources CH Timeine 
Keen 


atribut name berisi data boss 
atribut age berisi data 46 
atribut sex berisi data male 


Gambar 2-4 Hasil eksekusi for-in atas sebuah object 
2.8.3 while 


while adalah perulangan yang paling sederhana. Perulangan dilakukan selama kondisi untuk 
berhenti (break condition) belum terpenuhi. Dalam eksekusinya, break condition diuji terlebih 
dahulu baru kemudian kode dijalankan. Berikut ini contohnya. 


var a = 
var i= 


//selama i kurang dari 
//break condition ii 
while (i < 4) { 
//simpan i dalam array 
a.push(i); 


//naikkan i untuk proses selanjutnya 
E 


console.log(a);///[0,1,2,3] 
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Kode di atas juga bisa kita tulis dalam bentuk berikut. 


var a [ 

Welle al 0 

while (i++ < 4){ 
a.push(i); 


15 


hg 


console, Log (a) 8/02 


Jika kita mengganti i++ dalam contoh di atas dengan ++i maka kita akan mendapat hasil 
yang berbeda. Jadi kita perlu berhati-hati dalam menggunakan while dengan shortcut seperti itu. 
Ini juga berlaku untuk operasi kondisional seperti yang kita pelajari dalam bab sebelumnya. 


Berikut ini contoh kode di atas dengan ekspresi ++i sebagai pengganti i++. 


var a [ 

vaw il 0 

while (++i « 4){ 
a, pusm (aL) $ 


I; 


hg 


comsole. los (Si) 12,3 


2.8.4 do-while 


do-while sedikit berbeda dengan while tetapi kalau kita tidak paham perbedaannya, kode 
kita tidak akan bekerja dengan benar. Berikut contoh do-while yang mirip dengan contoh while di 
atas. 


LIA Opi p 203) 


Hasil eksekusinya memang sama, tetapi ada perbedaan mendasar antara do-while dan 
while. Do-while akan memproses blok kode di dalamnya terlebih dahulu, baru kemudian menguji 
break condition sehingga blok kode diproses minimal satu kali. Sebaliknya while akan menguji 
break condition dulu baru memproses blok kode dan mungkin saja blok kode tidak pernah 


diproses. Berikut contoh yang menunjukkan perbedaan keduanya. 


ver lo = Is 
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BAB 3. FUNCTION 


Dalam JavaScript, function adalah first-class object. Artinya, function bisa digunakan secara 
mandiri (standalone) atau sebagai bagian dari objek atau function lain. Secara default, function 
yang kita tulis adalah global function yang bisa diakses dari kode lain dalam satu window yang 
sama kecuali jika function tersebut merupakan bagian dari sebuah object atau function lain. 


Global function yang kita buat dalam sebuah file script1.js bisa diakses/dieksekusi oleh 
kode lain yang berada dalam file misalnya script2.js dan sebaliknya, jika kedua skrip tersebut 


dimuat oleh halaman html yang sama. 


3.1 Function Sederhana 


Setiap function terdiri dari dua bagian yaitu signature dan body. Signature sebuah function 
adalah nama dan parameter sedangkan body adalah seluruh kode di antara kurung kurawal. 


function sum(a,b){ //signature, nama = sum, parameter = a € b 
recica E + los // body 
y; 


//eksekusi function, tampilkan hasilnya di console 
console, log (sum (IL, 2)) 8773 


Karena function juga merupakan sebuah data, kita bisa menulis kode di atas sebagai 
sebuah variabel yang berisi function tanpa nama (anonim) seperti berikut: 


Eier LOM (ai) 4 
ween E ar log 


hg 


Setiap function memiliki nilai balik (return value) yang dikirimkan ke kode yang 
mengeksekusinya. Kalau kita tidak secara eksplisit mendefinisikan nilai balik sebuah function, 
JavaScript engine akan membuatnya secara otomatis dengan nilai undefined. Dua function di 


bawah memiliki nilai balik yang sama, perbedaannya fn A memiliki nilai balik eksplisit sedangkan 


fn B implisit. 


//nilai balik eksplisit 


ED enn Em AU 
return undefined: 


} 


//nilai balik implisit 


EDICT LOM 


} 


fn BO 1 


Sebuah function bisa menjadi bagian (child) dari function lain. 


Function 


getCircleArea(r) | 


cue LOM pi se (() 4 
zeicben MATA, Ll = 129 


hg 


return 


hg 


3.2 Scope C 


2 * pl et); 


hain 


Setiap function yang dieksekusi memiliki scope atau ruang lingkup yang menentukan 


variabel dan function lain yang bisa diakses oleh function tersebut. Sama dengan variabel global, 


global function bekerja dalam konteks window dan bisa diakses dari manapun. 


var n 
var Em JA 
consol 


Punca ()) A 


consol 


.log (this) ; //window 
loga) 210 


Sebuah child function bisa mengakses variabel atau function yang dimiliki oleh parent 


function. Sebaliknya parent function tidak bisa mengakses variabel atau function yang dimiliki oleh 


child. 


var fn = 


UIA ICsLOiM ()) A 


var a = 10; 


func 


tion fn test() | 


var b = 20; 


} 


func 


consol 
consol] 


Oa nee E 
og (a); 


e.] 
asi 


tion fn test2() { 

comsole. log ("itm test2") ¢ 

//karena function ini tidak punya variabel a 

//yang dipakai adalah variabel a milik root function 
console.log(a); 


function En test2 child() { 
console.log ("itm test2 child”); 
console.ilog( aj) 
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¿dea blsa ehleakses karana a barada dalan 
//scope chain 


comsole. log (a) 82210 
console leg pea tm Tes), 
//fn test () ada dalam scope chain 
//sehingga bisa diakses juga 

En test () $ 


} 


En dera Chile) 
} 


ca test (0) ; 
cn wege () $ 


Console, lhog ("ia") £ 
//b tidak dikenali oleh root function 
console.log (b) ; //undefined 


} 


//jalankan function fn() 
fn(); 


Ketika sebuah function tidak bisa menemukan variabel atau function di dalam scope-nya 
sendiri, function tersebut akan mencari variabel atau function di dalam scope parent function 
kemudian parent dari parent function dan seterusnya sampai global scope. Struktur ini disebut 
scope chain. Jika sampai global scope variabel atau function yang dicari tidak ditemukan maka 
variabel atau function tersebut bernilai undefined. 


var x = 100; 


Dungun iim JAC) 1 
var y = 505 


Pune rm B) { 
var z = 200; 


muncul a CC) { 
var mx ty + Bj 
console.log('sum = ' + sum) 


} 


cuac ia IDC) € 
var total = sum * 0.5;//ERROR! 
Console. log ("oral = Y + Cove) 
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fn A(); 


Dalam contoh kode di atas, £n C tidak memiliki variabel x,y, dan z sehingga function ini 
akan mencari variabel-variabel tersebut dalam scope chain. Variabel z ditemukan di parent 
function ( £n_B ), variabel y ditemukan di parent dari Co B yaitu fn A, dan variabel x ditemukan 


di parent dari Co A ( window/global ). Variabel sum yang ada di scope fn C tidak bisa ditemukan 
oleh fn D karena hubungan antara fn D dan fn C adalah sibling, bukan parent-child, sehingga 
sum akan bernilai undefined. Scope chain fn C dalam kode di atas dapat divisualisasikan 
dengan gambar berikut. 


A 


—> varx=100; | Window (global) 


| 


—> var y = 50; in A 

Scope chain 
dari fn C 
> varz = 200; fn_B 
var SUM =X +y +Z; fn_C fn_D var total = sum * 0.5; 
X 
Gambar 3-1 Scope Chain 

3.3 Callback 


Dalam praktek pemrograman JavaScript, kita akan menemui banyak sekali penggunaan 
callback yaitu sebuah function yang dikirim ke function lain sebagai argumen sehingga bisa 
dieksekusi oleh function tujuan. Berikut ini contoh callback. 


funciona adella, o) / 
ver sum = al) + ti: 
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console.log(sum) ; 


} 


function fn A() { 
reram Lg 


} 


DIAC LOM iim B) q 


return 2; 


} 


//perhatikan : fn A dan fn B tanpa 

//tanda kurung di belakangnya karena 

//kita ingin mengirim function bukan hasil eksekusinya 
Add Ener, En leh 3 


Callback juga bisa diimplementasikan dengan function anonim. Contoh di atas bisa kita tulis 


sebagai berikut: 


function acella 19 
ver sun = a) 
console.log(sum): 


} 


ies TON ese ©) tm AN | 
racun Le 


} 


Da B diganti oleh function anonım 
add (stim A, Ren {recurn Zo hl 


3.4 Self-Invoking Function 


Self-invoking function adalah function yang mengeksekusi dirinya sendiri segera pada saat 
kode function tersebut selesai dibaca oleh JavaScript engine. Banyak developer yang lebih suka 
menyebutnya sebagai Immediately-invoked Function Execution (IIFE, dieja: iffy ) untuk 
menghindari kerancuan dengan istilah recursive function yang juga berarti function yang 
mengeksekusi dirinya sendiri tetapi dalam konteks yang berbeda. Fitur ini adalah fitur unik dalam 
bahasa JavaScript yang setahu saya tidak ada dalam bahasa lain kecuali mungkin bahasa 


functional seperti Haskell dan Erlang. 


Berikut ini contoh dari self-invoking function. Begitu halaman HTML dimuat oleh browser, 
kita akan melihat output log di JavaScript console. Perhatikan tambahan tanda kurung, satu 
sebelum kata function, tiga setelah kurung kurawal penutup body. Karena function ini otomatis 


dieksekusi, kita tidak perlu memberinya nama. 


nga A 
console.log('self-invoking function"); 
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TODE 


//self-invoking function dengan parameter 


(function (name) ( 
console.log('halo,' + name): 


Liese" 


E? Elements ` e | Resources Gei Network o Sources CB Timeine 


self-invoking function 
halo,boss 


Gambar 3-2 Hasil eksekusi Self-invoking Function 


setelah browser di-refresh 


3.5 Return Function 


Seperti telah kita bahas dalam materi sebelumnya, function dalam JavaScript adalah sebuah 


tipe data sama seperti Object, String, Array, dan Number. Karena itu kita bisa membuat 


function yang memiliki nilai balik berupa sebuah function. 


Dungun im ANI 
console.log('Hello'); 
Kalla Function ()) 4 

Console, o (wor la AR 7 
} 
} 


var myFunc = fn A(); //Hello 


//myFunc sekarang berisi function yang 
//dikirim kembali oleh fn A 
myFunc(); //output: World 


3.6 Closure 


Closure adalah konsep yang sedikit sulit dipahami karena tidak ada penjelasan formal 
dalam spesifikasi JavaScript yang dengan gamblang mendeskripsikannya. Pada dasarnya, 
closure adalah mekanisme untuk mengubah scope sebuah variabel atau function pada saat 


eksekusi. Perhatikan contoh berikut: 


ie NO ANI 
var b = ‘hell 
//closure 


return functi 
KAL 19€ 


} 
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//simpan hasil eksekusi fn A sebagai variabel 
//fn B di global space 

var itm B = itm A) 5 

Kan Er sekarang memilıkı akses KE 


//variabel b dalam scope fn A 
console.log(fn_B());//hello 


console.log(b); //undefined 


Kalau kita ketikkan perintah fn_B (tanpa tanda kurung di belakangnya) dalam konsol, kita 


bisa melihat struktur fn B seperti di bawah ini yang berarti fn B tetap berada dalam global 


scope. Tentu timbul pertanyaan, kenapa fn B dalam global scope memiliki akses ke variabel b 
dalam scope fn A. Padahal kalau kita lihat dalam contoh kode di atas, baris terakhir akan 


menghasilkan pesan undefined yang berarti b tidak dikenali dalam global scope. 


a | 1 SL © 
(& Elements wi | Resources (@) Network “3 Sources 64 Timeline ( 


hello 
> fn_B 


function () { 
return b; 


> 


Gambar 3-3 Test Closure 


Dalam contoh di atas, Co B memiliki akses ke variabel b karena function Co A menciptakan 
sebuah closure pada saat dieksekusi. Closure tersebut memiliki referensi permanen terhadap 
variabel b dan tetap ada bahkan setelah fn A selesai dieksekusi. 


Contoh kode di atas juga bisa kita ubah sehingga fn A langsung membuat closure dan 


menyimpannya sebagai fn B seperti di bawah ini. 


Welle itil 13) 


function fn A() { 
wer 19 = 'nello'; 
//buat closure & simpan sebagai fn B 
fn B = function ()f 
return b; 


} 
hg 


In AU: 
console. log (En! 


Dari contoh di atas, jelas closure adalah fitur yang sangat bermanfaat karena fitur ini 
memungkinkan kita mengatur scope sebuah function sesuai kebutuhan. Hanya perlu kita ingat, 
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closure membuat kode kita kurang readable karena perubahan scope terjadi di belakang layar. 
Jadi kita perlu hati-hati dalam menggunakannya dan sebaiknya semua pemakaian closure diberi 
komentar yang cukup. 


Di bawah ini contoh kode di mana closure menimbulkan masalah kalau kita tidak cermat. 
Misalkan kita ingin membuat sebuah array berisi closure yang merekam nilai variabel i pada 


saat closure tersebut dibuat. 


EDICT LOM i 


vara 
wee aL 
for (1 o a < Be are) 4 
//buat closure & simpan dalam array 
ali] = function) 4 

return i; 


} 
} 


return a; 


} 


var myArray = £n(); 

console.log (myArray[0] ()) ;//3 
console. log (myArray[1]()) ;//3 
console.log (myArray[2] O) ;//3 


Kita lihat hasil eksekusi closure dalam myArray di tiga baris terakhir semua menghasilkan 
nilai 3, bukan 0,1,2 seperti yang kita harapkan. Apa yang terjadi di sini adalah akibat closure berisi 
referensi ke variabel i dan bukan nilai sebenarnya. Pada saat fn A selesai di eksekusi nilai 
variabel i adalah 3 jadi nilai inilah yang dikembalikan oleh semua closure pada saat mereka 
dieksekusi. 


Bug tersebut bisa kita perbaiki dengan menggunakan closure tambahan sehingga kode 
menjadi seperti berikut ini di mana kita mengirim variabel i sebagai argumen ke sebuah self- 
invoking function yang kemudian membuat closure. Closure yang dihasilkan tidak memiliki 
referensi langsung ke i tetapi memiliki referensi ke x yang nilainya sama dengan i pada saat 
self-invoking function dieksekusi. 


IK WMACICSLOM E 
var 
var 
for (al 2 << Sp aan) 4 

//buat closure & simpan dalam array 

[i] = (function (x) { 

return function () { 
return x; 
H 


}(i));//kirim i sebagai argumen 


} 


return a; 
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} 


var myArray = fn); 


console.log(myArray[0]()); //0 
console.log(myArray[1]()); //1 
console.log(myArray[2]()); //2 


Contoh pemakaian closure yang berikutnya adalah dalam membuat global function yang 
memiliki akses ke sebuah local variable. Dengan kata lain, kita menyembunyikan sebuah variabel 
dan kita ingin variabel tersebut hanya bisa diakses melalui global function yang ditentukan, 
misalnya untuk keperluan validasi. Dalam contoh ini, variabel name hanya bisa diubah melalui 


function setName () dan nilainya harus berupa string. 


//global function (getter & setter) 
year EI Blue seueme y 


(function () { 
//variabel lokal, tidak bisa diakses langsung 
var name = "boss"; 

//closure untuk mengakses local variable 
getName = function() { 
recura meme y 


hi 
setName = function (value) { 
//name harus berupa string 
if (typeof value == 'string') { 
name = value; 


console.log (getName ())://boss 


setName ('bob'); 
console.log (getName () ) ; //bob 


setName (123); 
//name tidak berubah karena 123 bukan string 
console.log (getName () ) ; //bob 
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BAB 4. OOP 


JavaScript adalah bahasa yang unik. Di satu sisi bahasa ini memiliki karakteristik bahasa 
functional di mana function adalah first-class object. Di sisi lain, JavaScript mendukung konsep 
OOP yaitu turunan (inheritance) dalam bentuk prototype yang dikenal dengan istilah prototypal 
inheritance. Dalam bab ini kita akan belajar mengenai implementasi OOP dalam JavaScript. 


4.1 Object Properties & Methods 


Kita bisa membuat objek baru di luar yang sudah ada (built-in) dalam JavaScript dengan 
menggunakan notasi object-literal atau function. Sebagai contoh, misalnya kita ingin membuat tipe 
data Car dengan notasi object-literal. Semua key dalam object ini disebut properti dari objek Car. 
Setelah objek ini dibuat kita bisa mengubah, menambah dan menghapus properti. 


//buat objek Car dengan properti brand,type,dan year 
yen Car = 2 

brand: 'honda', 

Caen jazz”, 

year: 2011 
hi 


Console, Log (Car) y 
//ubah properti dari objek yang sudah kita buat 


Gar, brand = 'Toyota'; 
car.type = 'Fortuner'; 


//hapus properti year 
delete(car.year); 


//tambah properti baru 
car .odometer = 100000; 


console.log(Car): 


Gambar Gambar 4-1 menunjukkan hasil eksekusi kode di atas. 
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| | S p= A ét á FR 
(Kg) Elements a] Resources Ka) Network RS Sources Se imeline Sk Profiles 


Object (brand: "honda", type: "jazz", year: 2011} 


Object fbrand: "Toyota", type: "Fortuner", odometer: 1000007 


Gambar 4-1 Manipulasi Object Literal 


Objek bisa memiliki properti berupa function. Dalam konteks OOP, properti ini disebut 
sebagai method. 


var car = ( 
brand: 'honda', 
type: Nae", 
year: 2011, 
Oke vas noen zem () AJ 
Console- Log (“ea yang) ¢ 
//object tidak memiliki scope-chain 
//jadi kita perlu menggunakan 'this' 
//sebagai referensi ke objek ini sendiri 
this.odometer++; 


}r 
MEGA Ra (0) \ 
console.log('stopped'); 
} 
li 


Gan seb ya) ¢ Arainn 
car.stop();//stopped 
console.log(car.odometer) ://100001 


4.2 Constructor Function 


Dari contoh sebelumnya bisa kita lihat bahwa semua properti dari objek yang dibuat dengan 
notasi object-literal tidak memiliki proteksi yang dikenal dengan nama access-modifier dalam 
bahasa lain. Hal ini tidak menjadi masalah kalau objek yang kita buat adalah objek yang hanya 
kita gunakan untuk menyimpan struktur data sederhana. Untuk objek yang lebih kompleks hal ini 
sangat tidak disarankan, terutama jika objek yang bersangkutan diakses di banyak bagian 


program yang lain. 


Selain itu, dengan menggunakan object-literal, kita tidak bisa membuat lebih dari satu objek 
tanpa melakukan copy-paste. Tentu sangat merepotkan jika suatu waktu kita ingin menambah 
atau menghapus properti, kita harus melakukannya berulang kali sesuai jumlah objek yang ada. 


Sebagai solusinya, kita bisa membuat class menggunakan constructor function. Class 
adalah cetak biru dari sebuah objek. Kita bisa membuat banyak objek dari satu class dengan 
menggunakan keyword new. Di bawah ini contoh implementasinya dalam pembuatan class Car 
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dan cara membuat objek dari class ini. Untuk membuat properti dan function yang bisa diakses 
dari luar objek (public), kita harus menggunakan keyword this. 


var Car = function() { 


this.brand = 'Honda'; 
EMAL Een = "jazz"; 
this.year = 2011; 


Ras oki ye = Eumerioa () 4 
¡[JA wang 


} 
tals Sus = irbinceicsom CH 1 
return 'stopped'; 


hg 
} 


//buat objek Car 
Welle Car = mew Cari) 
console.log(car.brand); //Honda 


consol] og(car.type); //jazz 
consol] Og (car. acia) 9 //2011 
console.log(car.drive()); //driving 
console.log(car.stop()); //stopped 


//buat objek Car baru 
var car2 = new Car(); 
//ubah propertinya 
ear2.srane = Moyo.” y 
car2.type = 'Fortuner'; 


console.] ‚loizelael))g Ener 
console. ] .type); //Fortuner 
console. 1 .year); //2011 
console. 1 .drive()); //driving 
console.) .stop()): //stopped 


Kita lihat constructor function sangat mempermudah pembuatan banyak objek dari class 
yang sama. Proses pembuatan objek dikenal dengan nama instansiasi dan objek yang dihasilkan 
disebut instance dari class yang bersangkutan. 


Masalahnya, dengan cara di atas, objek yang kita buat tetap tidak memiliki proteksi dalam 
bentuk private member (variabel dan function) . Properti objek tetap bisa diubah dengan bebas 
oleh objek atau kode lain seperti object literal. Solusinya adalah : 


e Menggunakan keyword var untuk private variable 


e Membuat function yang merupakan child-function bukan properti 


Misalkan kita ingin membuat properti odometer sebagai private property yang hanya bisa 


dibaca namun tidak bisa diubah langsung dari luar. Nilai odometer hanya bisa berubah pada saat 
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function drive dieksekusi. Perubahan kedua adalah penambahan private function brake () yang 


juga tidak bisa diakses langsung dari luar. Kita tahu dari pembahasan function yang lalu, bahwa 


child function tidak bisa diakses dari luar, jadi kita buat brake sebagai child function di dalam 


constructor. Class Car kita ubah seperti berikut. 


var Car = func 


this.brand 
this.type 
this.year 


ciom () 4 


= Honda: 
= Vaan" s 
= 2011; 


//private property, gunakan keyword var, bukan 
var odometer = 0; 


Ee 

gaiso Oye = Eumerlicoa (Cp A 
odometer++; 
subia Sebayang "y 


} 


class. Stoo = Eunmcuioa () { 
//panggil private function 
brake (): 
recura "suopjea" y 


hg 


this.getOdo = function () 1 
return odometer; 


} 


//private function, dalam bentuk 
EE 
function brake () { 
console.log('braking'): 
} 
y; 


a TESTING 


var car = new Car(); 
console.log(car.brand); //Honda 
console.log(car.type); //jazz 
console.log(car.year); //2011 


Log (car qero 20 
.log(car.drive()); //driving 
.log(car.stop()); //braking, stopped 


consol] 
consol 
consol 


//setelah drive(), nilai odometer berubah 
COMSOLE . log (car yerdela)) 247 


//coba ubah langsung odometer 
car.odometer = 1000; 
//odometer tetap 1 
console.log(car.getOdo());//1 


ela N 
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//coba panggil brake () 
car.brake();//!ERROR undefined 


4.3 Inheritance 


Inheritance atau turunan adalah objek yang dibuat berdasarkan objek lain sehingga objek 
yang turunan tersebut memiliki karakteristik yang serupa dengan objek asalnya. JavaScript tidak 
mendukung inheritance berdasar class tetapi berdasar objek. Class dalam JavaScript berbentuk 
function dan function adalah sebuah objek, jadi pada dasarnya kita membuat turunan dari sebuah 
objek bukan dari class objek tersebut. Ini berbeda dengan bahasa lain misalnya Java, PHP, dan 
ActionScript 3. 


Untuk membuat turunan sebuah objek, misalnya objek B sebagai turunan objek A, kita 
lakukan dua langkah: 


1. Mengeset objek A sebagai prototype class B 


2. Mereset constructor class B. 


Di bawah ini kode untuk membuat class baru yaitu Tank sebagai turunan class Car. 


ver Car = Futetloa () 4 


this.brand = 'Honda'; 
this.tcype = "Jazz"; 
this.year = 2011; 


//private 
var odometer = 0; 


this.drive = function 
odometer++; 
ec nuca Yeay y 


} 


TALS STOO = Reen 
brake (): 
return 'stopped': 


hg 


this.getOdo = function () | 
return odometer; 


} 

//private 

function brake() { 
console.log('braking'); 


} 
hg 


//buat turunan Car 
var Tank = function () { 
IMLS ies  Eunciom(() 4 
meetin Milling $ 


} 
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}; 

//1. Set objek Car sebagai prototype 
Tank.prototype = new Car(); 

1/2. Reset constructor 

Tank. prototype.constructor = Car; 


//TESTING 

var myTank = new Tank(); 
myTank.brand = "Abrams" 
myTank.type = "Main battle tank"; 


console.log (myTank.brand) ://Abrams 

console.log (myTank.type) ;//Main battle tank 
//function yang diwarisi oleh Tank dari Car 

console.log (myTank.getOdo ())://0 

console.log (myTank.drive()) ;//driving 

console.log (myTank.stop()) ;//braking, stopped 

console.log (myTank.getOdo ())://1 

//function yang hanya ada di Tank, tidak ada di Car 
console. log (mytank, fire ());//firing 


Masih banyak materi mengenai OOP yang perlu kita pelajari misalnya prototype, mixin, 
parasitic inheritance, dan lain-lain. Tetapi materi-materi tersebut cukup kompleks dan termasuk 
kategori advanced dan saya pikir kurang sesuai untuk buku yang ditujukan untuk programmer 
JavaScript pemula seperti buku ini. Mungkin lain kali kalau ada kesempatan saya akan menulis 
buku khusus OOP dengan JavaScript. 


Menguasai JavaScript 40 


BAB 5. PENUTUP 


Saya harap banyak yang Anda pelajari dari buku ini. Selain itu, saya juga berharap Anda 
bisa membagikan buku ini kepada teman-teman Anda supaya kita bisa belajar menjadi 
programmer handal bersama-sama. Seperti ungkapan dalam bahasa Inggris, "The more, the 


merrier’ yang artinya kurang lebih "Lebih rame, lebih asik". 


5.1 What next? 


Buku ini hanya berisi materi yang menurut saya wajib dipahami oleh semua programmer 
JavaScript pemula. Untuk menjadi programmer yang handal dan memiliki nilai jual, masih banyak 


yang harus kita pelajari diantaranya: 


e OOP & Design Patterns 

e DOM Scripting dengan JavaScript murni ( tanpa Jquery, mootools, atau library 
lainnya) 

e AJAX 

e JavaScript framework : Backbone", Knockout*, Ember, Angular 


e Modular application development menggunakan RequireJS 


* Saya berencana menulis buku mengenai Backbone dan Knockout tetapi karena materinya 
kompleks dan juga butuh banyak waktu, kemungkinan nanti saya jual dalam bentuk ebook atau 


hardcopy dengan harga murah atau donationware. 


5.2 Referensi 


Berikut ini buku-buku dan sumber lain yang saya rekomendasikan untuk Anda baca jika 


Anda ingin mempelajari JavaScript lebih lanjut. 


e JavaScript : The Good Parts, Douglas Crockford, O'Reilly 
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Object Oriented JavaScript, Stoyan Stefanov, Packtpub 
High Performance JavaScript, Nicholas C. Zakas, O'Reilly 
DOM Scripting, Jeremy Keith, Friends of Ed (Apress) 
Mozilla Developer Network 
o  htips://developer. mozilla.org/en-US/docs/JavaScript/Reference 
Microsoft Developer Network 


o Attp://msdn.microsoft.com/en-us/library/ie/yek4tbz0(v=vs.94).aspx 


